<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/assets/css/layui.css">
    <link rel="stylesheet" href="/assets/css/view.css"/>
    <link rel="icon" href="/favicon.ico">

    <title>订单列表</title>
</head>
<body class="layui-view-body">
<div class="layui-content">

    <div class="layui-row">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="form-box">
                    <!--<div class="layui-form layui-form-item">
                        <div class="layui-inline">
                            <div class="layui-form-mid">商品名:</div>
                            <div class="layui-input-inline" style="width: 200px;">
                                <input id="param1" type="text" autocomplete="off" class="layui-input">
                            </div>
                            &lt;!&ndash;                            <div class="layui-form-mid">分类:</div>&ndash;&gt;
                            &lt;!&ndash;                            <div class="layui-input-inline" style="width: 200px;">&ndash;&gt;
                            &lt;!&ndash;                                <input id="param2" type="number" autocomplete="off" class="layui-input">&ndash;&gt;
                            &lt;!&ndash;                            </div>&ndash;&gt;
                            <div class="layui-form-mid">分类:</div>
                            <div class="layui-input-inline" style="width: 100px;">
                                <select id="category-select-1" name="sex">
                                    <option value=""></option>
                                </select>
                            </div>
                            <button id="searchBtn" class="layui-btn layui-btn-blue">
                                <svg style="vertical-align: middle;" t="1616598635842" class="icon"
                                     viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                                     p-id="2349" width="16" height="16">
                                    <path d="M581.973333 846.933333a380.8 380.8 0 1 1 380.8-380.8A381.226667 381.226667 0 0 1 581.973333 846.933333z m0-688a307.2 307.2 0 1 0 307.2 307.2 307.413333 307.413333 0 0 0-307.2-307.2z"
                                          fill="#FA6302" p-id="2350"></path>
                                    <path d="M146.56 938.666667a36.906667 36.906667 0 0 1-26.026667-64l192-190.933334a36.906667 36.906667 0 0 1 52.053334 52.266667l-192 192a37.333333 37.333333 0 0 1-26.026667 10.666667z"
                                          fill="#43D7B4" p-id="2351"></path>
                                    <path d="M470.826667 274.773333m-49.066667 0a49.066667 49.066667 0 1 0 98.133333 0 49.066667 49.066667 0 1 0-98.133333 0Z"
                                          fill="#43D7B4" p-id="2352"></path>
                                    <path d="M312.106667 684.8l-23.68 23.466667A388.693333 388.693333 0 0 0 341.333333 760.32l23.466667-23.253333a36.906667 36.906667 0 0 0-52.053333-52.266667z"
                                          fill="#425300" p-id="2353"></path>
                                </svg>
                                <span style="margin-left: 10px">查询</span></button>
                            <button id="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>-->

<!--                    <button id="add" class="layui-btn layui-btn-blue"><i class="layui-icon">&#xe654;</i>新增</button>-->
                    <table id="storeTable" lay-filter="storeTable"></table>
                </div>

            </div>
        </div>
    </div>
</div>
<script type="text/html" id="barDemo">
    <!--    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看详情</a>-->
    <a class="layui-btn layui-btn-xs" lay-event="edit">订单处理</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="switchTpl">
    <!-- 上下架切换 -->
    <input type="checkbox" name="statusCheck" value="{{d.id}}" lay-skin="switch" lay-text="已处理|待处理" lay-filter="status" {{
           d.status== 1 ? 'checked' : '' }}>
</script>
<script src="/assets/layui.js"></script>
<script src="/js/request.js"></script>

<script th:inline="javascript">
    var element = layui.element;
    var table = layui.table;
    var layer = layui.layer;
    var form = layui.form;
    form.render();
    var $ = layui.jquery;
    table.render({
        elem: '#storeTable',
        url: '/paymentRecord/page',
        parseData: function (res) { //res 即为原始返回的数据
            console.log(res)
            return {
                "code":0, //解析接口状态
                "msg": res.msg, //解析提示文本
                "count": res.data.total, //解析数据长度
                "data": res.data.records //解析数据列表
            };

        },
        cols: [[ //标题栏
            {field: 'id', title: 'ID', width: 150}
            /*, {
                title: '商品图',
                width: 100,
                templet: '<div><img id="product-img" src="{{ d.productDO.productImgs }}"></div>'
            }*/
            , {field:'orderNumber',title: '订单号', width: 150, sort: true}
            , { title: '下单用户', width: 150, templet: function (d) {
                    return d.userDO.userName;
                }}
            , {field: 'amount', title: '支付金额', width: 150, sort: true}
            , {field: 'payType', title: '支付类型', width: 150 ,templet:(d)=>{
                  return d.payType==="WEIXIN"?"微信":"支付宝"
                }}
            , {field: 'payStatus', title: '支付状态', width: 150, templet: function (d) {
                let status = "支付成功"
                     if(d.status===" PENDING") {
                        status = "支付中"
                    }else if(d.status===" FAILURE") {
                        status = "支付失败"
                    }else if(d.status==="REFUND_SUCCESS") {
                        status = "退款成功"
                    }else if(d.status==="EFUND_FAILED") {
                        status = "退款失败"
                    }
                    return status;

                }, unresize: true}
            , {field: 'gmtCreated', title: '支付时间', width: 250}
            , {fixed: 'right', width: 200, align: 'right', toolbar: '#barDemo'}
        ]]

        , skin: 'line'//表格风格
        , title: "订单表"
        , even: true
        , page: true //是否显示分页
        , limits: [7,10]
        , limit: 10 //每页默认显示的数量
    });

    //展示已知数据
    //搜索
    function search() {
        let param = new Object();
        if ($("#param1").val()) {
            param["storeTitle"] = $("#param1").val();
        }
        if ($("#param2").val()) {
            param["level"] = $("#param2").val();
        }
        if (JSON.stringify(param) === '{}') {
            layer.msg("至少输入一个查询条件", {icon: 2})
            return;
        }
        table.reload('storeTable', {
            url: '/product/search',
            method: "post",
            contentType: 'application/json',
            where: param
            , page: {
                curr: 1 //重新从第 1 页开始
            }
        });
    }

    $("#searchBtn").on("click", () => {
        search();
    });

    //重置
    $("#reset").on("click", () => {
        $("#param1").val("");
        $("#param2").val("");
    })

    //监听上下架操作
    form.on('switch(status)', function (obj) {
        console.log(obj);

        //修改上下架
        //layer.tips(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);
        $.ajax({
            url: `/product/upOrDown/${this.value}`,
            dataType: 'json',
            type: 'get',
            success: function (data) {
                layer.msg("操作成功", {icon: 1})
                //layui.form.render("table");//重新渲染 固定写法
            }
        });


    });


    //监听行工具事件
    table.on('tool(storeTable)', function (obj) {
        var data = obj.data;
        console.log(form)

        if (obj.event === 'del') {
            layer.confirm('真的删除行么', async function (index) {
                obj.del();
                const result = await requests(`/product/del/${obj.data.id}`, "DELETE");
                if (result.success) {
                    layer.msg("删除成功", {icon: 1, time: 1000});
                }
                layer.close(index);
            });
        } else if (obj.event === 'edit') {
            //表单回显
            $('#productName').val(obj.data.name);
            $('#id').val(obj.data.id);
            $('#productIntro').val(obj.data.productIntro);
            $('#productImgs').val(obj.data.productImgs);
            $('#productPrice').val(obj.data.price);
            $('#productSubTitle').val(obj.data.subTitle);
            $('#category-select').val(obj.data.categoryId);

            layer.open({
                title: "添加商品",
                //调整弹框的大小
                area: ['800px', '500px'],
                shadeClose: true,//点击旁边地方自动关闭
                //动画
                anim: 2,
                //弹出层的基本类型
                type: 1,
                //刚才定义的弹窗页面
                content: $('#form'), //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']

            });
        }else if (obj.event==='detail'){
            layer.open({
                title: "商品详情",
                area: ['900px', '600px'],
                shadeClose: true,//点击旁边地方自动关闭
                //动画
                anim: 0,
                type: 2,
                content: '/views/productDetail.html'
            })
        }
    });

    $('#add').on("click", function () {

        $('#productName').val("");
        $('#id').val("");
        $('#productIntro').val("");
        $('#productImgs').val("");
        $('#productPrice').val("");
        $('#productSubTitle').val("");
        $('#category-select').val("");
        layer.open({
            title: "添加商品",
            //调整弹框的大小
            area: ['800px', '600px'],
            shadeClose: true,//点击旁边地方自动关闭
            //动画
            anim: 2,
            //弹出层的基本类型
            type: 1,
            //刚才定义的弹窗页面
            content: $('#form'), //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']

        });
    });

    //监听提交
    form.on('submit(formSubmit)', async function (data) {

        const subData = data.field;
        //自定义验证规则
        if (subData.name.trim() === "") {
            layer.msg("请完善表单", {icon: 2, time: 1000});
            return;
        }

        const result = await requests("/product/save", "POST", subData);
        console.log(result);
        if (result) {
            layer.msg("提交成功", {icon: 1, time: 1000});
        }
    });

    //类目选择框初始化
    $.ajax({
        url: '/category/list',
        dataType: 'json',
        type: 'get',
        success: function (data) {
            // console.log(data);//下面会提到这个data是什么值
            //使用循环遍历，给下拉列表赋值
            $.each(data.data, function (index, value) {
                // console.log(value.department_id);
                $('#category-select').append(new Option(value.name, value.id));// 下拉菜单里添加元素
                $('#category-select-1').append(new Option(value.name, value.id));// 下拉菜单里添加元素
            });
            layui.form.render("select");//重新渲染 固定写法
        }
    });

    //图片预览
    function previewImg(obj) {
        var img = new Image();
        img.src = obj.src;
        var imgHtml = "<img src='" + obj.src + "' />";
        //弹出层
        layer.open({
            type: 1,
            shade: true,
            title: false, //不显示标题
            area: ['auto', 'auto'],
            content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            cancel: function () {

            }
        });
    }

    //图片预览事件
    $("#product-img").each(function () {
        console.log(this);
        $(this).click(function () {
            console.log(this);
            previewImg(this);
        })
    });


</script>
</body>

<div style="display: none; margin-top:20px" id="form" class="form">
    <form class="layui-form" lay-filter="storeForm">
        <div style="display: none" class="layui-form-item">
            <label class="layui-form-label">商品ID</label>
            <div class="layui-input-inline">
                <input type="text" id="id" name="id" autocomplete="off" placeholder="id" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品名称</label>
            <div class="layui-input-block">
                <input type="text" id="productName" name="name" lay-verify="title" autocomplete="off"
                       placeholder="请输入商品名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品图片</label>
            <div class="layui-input-block">
                <input type="text" id="productImgs" name="productImgs" lay-verify="title" autocomplete="off"
                       placeholder="请输入商品图地址" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">商品副标题</label>
            <div class="layui-input-block">
                <input type="text" id="productSubTitle" name="subTitle" lay-verify="title" autocomplete="off"
                       placeholder="请输入副标题" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品价格</label>
            <div class="layui-input-inline">
                <input type="text" id="productPrice" name="price" lay-verify="title" autocomplete="off"
                       placeholder="请输入价格" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品类目</label>
            <div class="layui-input-inline">
                <select id="category-select" class="layui-input" name="categoryId" lay-filter="aihao">
                    <option value=""></option>
                </select>
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">商品介绍</label>
            <div class="layui-input-block">
                <textarea name="intro" id="productIntro" placeholder="请输入商品介绍" lay-verify="title"
                          class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formSubmit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>

    </form>
</div>
</html>